<template>
  <div class="">
    <search-input
      v-model="keyword"
      placeholder="输入搜索关键字搜索"
      @search="search"
    ></search-input>

    <!-- 侧边导航在这里自己封装子组件 -->
    <div class="con">
      <div class="left">
        <left-menu :list="cateList.data" @change="select"></left-menu>
      </div>
      <div>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in result"
            :key="item.id"
            :icon="item.icon"
            :text="item.name"
            @click="$router.push('/catelist/' + item.id)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import searchInput from "../../components/searchInput.vue";
//引入头部的搜索框子组件
import cateList from "../../../public/cate.json";
//最简单的一种使用json的方法 就是直接引入然后使用  一定要记得return
import leftMenu from "../../components/leftMenu.vue";
//引入左侧导航子组件
import { getCate } from "../../utils/home.js";
//引入获取分类数据的接口
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      keyword: "",
      // 搜索关键字
      cate: [],
      //所有的数据
      result: [],
      //筛选过后的数据
    });

    getCate().then((res) => {
      console.log(res);
      data.cate = res.data;
      data.result = res.data;
    });
    //拿到分类数据 因为这里接口不帮我们筛 所以我们要自己筛选 筛选的依据是分类id pid

    const select = (id) => {
      console.log(id);
      if (id == 0) {
        data.result = data.cate;
        return false;
      }
      //如果点的是全部就不筛选 直接 给result所有的数据
      data.result = data.cate.filter((item) => {
        return item.pid == id;
      });
    };
    //这是传给子组件的事件 在子组件点击 就会把id传到这个事件里 进行筛选

    const search = () => {
      console.log(111);
      data.result = data.cate.filter((item) =>
        item.name.includes(data.keyword)
      );
      //根据关键字对名称进行模糊搜索
    };
    //在子组件按下回车调用这个父组件的事件
    return { ...toRefs(data), cateList, select, search };
  },
  components: {
    searchInput,
    leftMenu,
  },
};
</script>

<style lang="scss" scoped>
.con {
  display: flex;
  width: 100%;
  .left {
    width: 90px;
    flex-shrink: 0;
    // 不缩小
  }
  .right {
    flex: 1;
  }
}
</style>
